<template>
    <!--  图像的阴影效果  -->
    <el-card>
        <div id="line" style="width: 100%;">
            <!-- 设置容器 -->
            <div id="linesatck"></div>
        </div>
    </el-card>
  
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';

var option;

option = {
  title: {
    text: '用户注册趋势'
  },
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['管理员', '普通用户']
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '15%',
    containLabel: true
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      name: '管理员',
      type: 'line',
      stack: 'Total',
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: '普通用户',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    }
  ]
};
//确保document.getElementById('linesatck')DOM元素加载完成，后才执行。不然加载不出图表。
onMounted(() => {
  var chartDom = document.getElementById('linesatck');
  var myChart = echarts.init(chartDom, null, {
  renderer: 'svg'    //矢量图
  });
  option && myChart.setOption(option);
});
</script>

//需要设置容器大小才能展示图形
<style>
  #linesatck{
    width: 100%;
    height: 350px;
  }
</style>